<template>
    <el-form ref="bannerForm" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm" status-icon>
        <el-form-item>
            <!-- 上传文件 -->
            <el-upload class="upload-demo" drag :on-change="handleImgChange" :on-remove="removePhoto" accept="image/*" :auto-upload="false" style="width: 100%">
                <el-icon class="el-icon--upload">
                    <upload-filled />
                </el-icon>
                <div class="el-upload__text">
                    <div>拖拽到此处</div>
                    <div>或点击上传</div>
                </div>
                <template #tip>
                    <div class="el-upload__tip"></div>
                </template>
            </el-upload>
        </el-form-item>

        <el-form-item>
            <div>
                <img style="width: 200px" v-if="ruleForm.picUrl" :src="ruleForm.picUrl" alt="" />
            </div>
        </el-form-item>

        <!-- 输入框 -->
        <el-form-item label="轮播图标题" prop="banner_title">
            <el-input v-model="ruleForm.banner_title" />
        </el-form-item>

        <el-form-item label="链接" prop="banner_href">
            <el-input v-model="ruleForm.banner_href" />
        </el-form-item>

        <el-form-item label="发布时间" required>
            <el-col :span="11">
                <el-form-item prop="banner_create_time">
                    <!-- <el-date-picker v-model="ruleForm.banner_create_time" type="date" label="" placeholder="开始"
                        style="width: 100%" /> -->
                    <!-- <el-input disabled v-model="ruleForm.banner_create_time" /> -->

                    <input style="outline: none; height: 30px; border: 1px solid #ccc; padding: 0 10px; border-radius: 3px" type="datetime-local" v-model="ruleForm.banner_create_time" />
                </el-form-item>
            </el-col>
            <el-col class="text-center" :span="2">
                <span class="text-gray-500"></span>
            </el-col>
        </el-form-item>

        <el-form-item label="广告介绍" prop="banner_desc">
            <el-input v-model="ruleForm.banner_desc" type="textarea" />
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="addBanner">发布</el-button>
            <el-button @click="resetForm(bannerForm)">重置</el-button>
        </el-form-item>
    </el-form>
</template>
<script lang="ts" setup>
// 导入消息提示框
import { ElMessage } from "element-plus";
// 导入定义数据的方法
import { ref, reactive, onMounted } from "vue";
// 导入表单组件对象
import type { FormInstance, FormRules } from "element-plus";
// 导入上传文件图标
import { UploadFilled } from "@element-plus/icons-vue";
// 导入相关接口
import { uploadPhoto, removePhotoFile, addBannerInfo, deleteBanner } from "../api/index";
// 导入创建路由方法
import { useRouter } from "vue-router";

// 导入格式化时间插件
import moment from "moment";

// 定义路由
const $router = useRouter();
// 获取token
let token: any = localStorage.getItem("token");
// 定义广告表单实例
const bannerForm = ref<FormInstance>();
// 定义对象记录表单提交的数据
const ruleForm = reactive({
    banner_title: "",
    banner_href: "",
    banner_create_time: "",
    banner_desc: "",
    file: "",
    picUrl: "",
});
// 初始化数据
ruleForm.banner_create_time = moment(new Date().getTime()).format("YYYY-MM-DD hh:mm:ss");
// 设置表单约束
const rules = reactive<FormRules>({
    // 标题
    banner_title: [{ required: true, message: "请输入广告名称", trigger: "blur" }],
    // 链接
    banner_href: [
        {
            required: true,
            message: "请输入广告链接地址",
            trigger: "change",
        },
    ],
    // 创建时间
    banner_create_time: [
        {
            type: "date",
            required: true,
            trigger: "change",
        },
    ],
    // 描述文字
    banner_desc: [{ required: true, message: "请输入广告描述", trigger: "blur" }],
});

// 预览图片
const previewPhoto = (file: any) => {
    // http://localhost:3000/banner/upload_img
    let formData = new FormData();
    formData.append("photo", file);
    console.log(4545, file);
    uploadPhoto(formData).then((content) => {
        console.log(content, 555);
        if (content.code == 200) {
            // 设置图片路径
            ruleForm.picUrl = content.picUrl;
        }
    });
};

// 编写重置广告方法（轮播图）
const resetForm = (formObj: FormInstance | undefined) => {
    if (!formObj) return;
    formObj.resetFields();
};
// 获取上传文件行为
const handleImgChange = (event: any) => {
    let file = event["raw"];
    // console.log("file:", file)
    if (file) {
        ruleForm.file = file;
        // 预览
        previewPhoto(file);
    } else {
        ElMessage("请选择图片。");
    }
};
// 删除图片
const removePhoto = async () => {
    console.log({ picUrl: ruleForm.picUrl });
    // 调用接口删除图片
    await removePhotoFile({ picUrl: ruleForm.picUrl }).then((content) => {
        console.log("3.0", content);
        if (content.code == 200) {
            ruleForm.picUrl = "";
        }
    });
};

// 发布广告
const addBanner = () => {
    // 获取表单信息
    let { banner_title, banner_href, banner_create_time, banner_desc, picUrl } = ruleForm;
    console.log({ banner_title, banner_href, banner_create_time, banner_desc, picUrl });
    // 调用发布广告的接口
    addBannerInfo({ banner_title, banner_href, banner_create_time, banner_desc, banner_picUrl: picUrl }).then((content) => {
        // console.log("xx:", content);
        if (content.code == 200) {
            ElMessage({
                message: content.msg,
                type: "success",
            });
            // 跳转列表
            $router.push({
                path: "/bannerlist",
            });

            // 重置表单
            ruleForm.banner_title = "";
            ruleForm.banner_href = "";
            ruleForm.banner_create_time = "";
            ruleForm.banner_desc = "";
            ruleForm.file = "";
            ruleForm.picUrl = "";
            console.log(ruleForm.picUrl);
        } else {
            ElMessage({
                message: content.msg,
                type: "warning",
            });
        }
    });
};
// 调用挂载钩子函数
onMounted(() => {});
</script>
<style lang="scss">
.el-upload-dragger {
    margin-bottom: 20px;
    padding-top: 0px;
    padding-bottom: 0px;

    div {
        padding: 0 !important;
        margin: 0 !important;
    }
}

.demo-ruleForm {
    ::v-deep .el-picker-panel__body {
        z-index: 100000000000;
        background-color: #ccc;
    }
}
</style>
